<!DOCTYPE html>
<html lang="en">
  <head>

        <!-- 引入 echarts.js -->
        <script src="http://pic.beeboom.net/sourse/echarts.min.js"></script>
        <!-- 引入主题 -->
        <script src="http://pic.beeboom.net/sourse/wonderland.js"></script>
        
        

        <!-- element-ui css-->
        <link rel="stylesheet" href="http://pic.beeboom.net/sourse/element-ui@2.15.7/lib/theme-chalk/index.min.css">

        <!-- vue -->
        <script src="http://pic.beeboom.net/sourse/vue.min.js"></script>
        
          <!-- element-ui js-->
          <script src="http://pic.beeboom.net/sourse/element-ui@2.15.7_lib_index.min.js"></script>

        <!-- 引入axios -->
        <script src="http://pic.beeboom.net/sourse/axios_0.26.0_axios.min.js"></script>

          <!-- 引入xlsx -->
          <script src="http://pic.beeboom.net/sourse/xlsx.full.min.js"></script>
          <script src="http://pic.beeboom.net/sourse/FileSaver.js"></script>
          <script src="http://pic.beeboom.net/sourse/md5.min.js"></script>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <!-- <meta http-equiv="refresh" content="120"> -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
      <title>OFA 805C</title>
      <!-- <style>
          #app{
              margin: 0 auto; 
              text-align: center
          }
      </style> -->
  </head>
  <body>   
      <div id="app"> 
        <el-container  style="height: 100vh; background-color: #0e1e2f;">
          <el-header style="background-color: #1a2a3a; color: #e6e6e6; height: 150px;padding: 2px;">
          <div>
            <el-row style="height: 80px">
              <el-col :span="20">
                <div>
                  <div style="padding-top: 5px; display: flex; align-items: center;">
                    <img src="/static/img/logo.png" alt="Logo" style="height: 75px; margin-right: 15px;">
                    <span style="font-size:30px">{{monitor_title}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="4"> 
                <div style="margin-top: 10px;">
                  <el-button style="float: right; padding: 3px; margin-right: 5px" type="danger" icon="el-icon-user-solid" circle @click="logout"></el-button>
                  <el-dropdown @command="handleCommand" style="float: right; margin-right: 5px">
                    <span class="el-dropdown-link" style="color: #e6e6e6; cursor: pointer;">
                      {{user}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
                      <el-dropdown-item command="changeAlias">修改别名</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <div style="clear: right"></div>
                  <span style="float: right; padding: 1px; margin-right: 5px">{{ currentTime }}</span>
                  <div style="clear: right"></div>
                  <span style="float: right; padding: 1px; margin-right: 5px">ID:{{ collectorInfo.hostname==''?collectorInfo.mac:collectorInfo.hostname || '' }}</span>
                </div>
              

                <!-- <div style="float: right; padding: 3px; margin-right: 5px">{{ currentTime }}</div> -->
              </el-col>
            </el-row>
          </div>
            <div style="padding-top:2px">
              <el-row>
                <el-col :span="24">
                  <el-menu
                    mode="horizontal"
                    :default-active="activeIndex"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                  >
                    <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index" style="width:150px;text-align:center">
                      <span v-if="!item.children"><i :class="item.icon||'el-icon-menu'"></i>{{ item.label }}</span>
                      <el-submenu v-if="item.children" :index="item.index" style="width:150px;text-align:center" @click.native.stop>
                        <template #title ><i :class="item.icon ||'el-icon-menu'"></i>{{ item.label }}</template>
                        <el-menu-item v-for="subItem in item.children" :key="subItem.index" :index="subItem.index">
                          <i :class="subItem.icon ||'el-icon-menu'"></i>{{ subItem.label }}
                        </el-menu-item>
                      </el-submenu>
                    </el-menu-item>
                  </el-menu>
                </el-col>
              </el-row>  
            </div>
          </el-header>
          
          <el-main>
            <el-row>
              <el-col :span="24">
                <el-card>
                  <div slot="header">
                    <span>数据一览</span>
                    <el-button type="primary" icon="el-icon-refresh" @click="refreshData">刷新</el-button>
                    <el-input
                      v-model="searchQuery"
                      placeholder="输入设备名称进行筛选"
                      style="width: 200px; float: right; margin-right: 10px;"
                      clearable
                    />
                  </div>
                  <div>
                    <el-table
                      :data="filteredDeviceData"
                      style="width: 100%"
                      stripe
                      border
                      v-loading="loading"
                      :header-cell-style="{background: '#1a2a3a', color: '#e6e6e6'}"
                      :cell-style="{background: '#0e1e2f', color: '#e6e6e6'}"
                      @sort-change="handleSortChange"
                      :height="tableHeight"
                      size="mini"
                    >
                      <el-table-column
                        prop="deviceCode"
                        label="设备编号"
                        width="180"
                        sortable="custom"
                      ></el-table-column>
                      <el-table-column
                        prop="deviceName"
                        label="设备名称"
                      ></el-table-column>
                      <el-table-column
                        prop="deviceTotalData"
                        label="总用量"
                      ></el-table-column>
                      <el-table-column
                        prop="deviceAddress"
                        label="设备地址"
                        width="300"
                      ></el-table-column>
                      <el-table-column
                        prop="updateTime"
                        label="更新时间"
                        width="180"
                      ></el-table-column>
                      <el-table-column
                        prop="voltage"
                        label="电池电压"
                        width="120"
                      ></el-table-column>
                      <el-table-column
                        label="操作"
                        width="120"
                      >
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            type="primary"
                            @click="handleAddForward(scope.row)"
                          >添加转发</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-col>
            </el-row>

            <!-- 配置区域 -->
            <el-row style="margin-top: 20px">
              <el-col :span="24">
                <el-card>
                  <div slot="header">
                    <span style="font-size: 16px; font-weight: bold; color: #e6e6e6;">设备配置</span>
                    <el-button type="primary" icon="el-icon-refresh" @click="getSerialConfig" style="margin-left: 10px;">刷新配置</el-button>
                    <el-button type="success" icon="el-icon-check" @click="saveSerialConfig" style="margin-left: 10px;">保存配置</el-button>
                    <el-button type="success" icon="el-icon-download" @click="exportSelectedData" style="float: right;">导出转发数据</el-button>
                  </div>
                  
                  <!-- 配置内容区域 -->
                  <el-tabs v-model="activeTab" type="border-card" style="background-color: #1a2a3a;">
                    <!-- 转发数据列表 -->
                    <el-tab-pane label="转发数据列表" name="forward">
                      <el-table
                        :data="selectedData"
                        style="width: 100%"
                        stripe
                        border
                        :height="tableHeight * 0.6"
                        :header-cell-style="{background: '#1a2a3a', color: '#e6e6e6'}"
                        :cell-style="{background: '#0e1e2f', color: '#e6e6e6'}"
                        size="mini"
                      >
                        <el-table-column
                          prop="deviceCode"
                          label="设备编号"
                          min-width="120"
                        ></el-table-column>
                        <el-table-column
                          prop="deviceUserName"
                          label="设备名称"
                          min-width="120"
                        ></el-table-column>
                        <el-table-column
                          prop="deviceTotalData"
                          label="总用量"
                          min-width="100"
                        ></el-table-column>
                        <el-table-column
                          prop="hexValue"
                          label="十六进制值"
                          min-width="120"
                        ></el-table-column>
                        <el-table-column
                          label="寄存器地址"
                          width="100"
                        >
                          <template slot-scope="scope">
                            {{ scope.$index * 2 }}
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="操作"
                          width="80"
                          fixed="right"
                        >
                          <template slot-scope="scope">
                            <el-button
                              size="mini"
                              type="danger"
                              @click="handleDeleteForward(scope.$index)"
                            >删除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-tab-pane>
                    
                    <!-- 串口设置 -->
                    <el-tab-pane label="串口设置" name="serial">
                      <el-form :inline="true" :model="serialConfig" size="small" label-position="top">
                        <el-form-item label="串口号" label-width="80px">
                          <el-select v-model="serialConfig.serialport" placeholder="请选择串口" style="width: 150px;">
                            <el-option label="COM1" value="/dev/ttyAMA0"></el-option>
                            <el-option label="COM2" value="/dev/ttyAMA1"></el-option>
                            <el-option label="COM3" value="/dev/ttyAMA2"></el-option>
                            <el-option label="COM4" value="/dev/ttyAMA3"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="波特率" label-width="80px">
                          <el-select v-model="serialConfig.serialbaud" placeholder="请选择波特率" style="width: 150px;">
                            <el-option v-for="rate in baudRates" :key="rate" :label="rate" :value="rate"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="数据位" label-width="80px">
                          <el-input-number v-model="serialConfig.databits" :min="5" :max="8" style="width: 150px;"></el-input-number>
                        </el-form-item>
                        <el-form-item label="校验位" label-width="80px">
                          <el-select v-model="serialConfig.parity" placeholder="请选择校验位" style="width: 150px;">
                            <el-option label="无校验" value="none"></el-option>
                            <el-option label="奇校验" value="odd"></el-option>
                            <el-option label="偶校验" value="even"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="停止位" label-width="80px">
                          <el-input-number v-model="serialConfig.stopbits" :min="1" :max="2" style="width: 150px;"></el-input-number>
                        </el-form-item>
                        <el-form-item label="启用状态" label-width="80px">
                          <el-switch v-model="serialConfig.enabled" active-text="启用" inactive-text="禁用" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                  </el-tabs>
                </el-card>
              </el-col>
            </el-row>
          </el-main>
        </el-container>

        <!-- 将对话框移到这里，在 #app 内部 -->
        <el-dialog title="修改密码" :visible.sync="passwordDialogVisible" width="30%">
          <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
            <el-form-item label="原密码" prop="oldPassword">
              <el-input v-model="passwordForm.oldPassword" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="passwordForm.newPassword" type="password" show-password placeholder="请输入新密码，需包含字母和数字"></el-input>
              <div style="color:#888;font-size:12px;margin-top:2px;">新密码需包含字母和数字，且不少于6位</div>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="passwordDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitPasswordChange">确 定</el-button>
          </span>
        </el-dialog>

        <el-dialog title="修改别名" :visible.sync="aliasDialogVisible" width="30%">
          <el-form :model="aliasForm" :rules="aliasRules" ref="aliasForm" label-width="100px">
            <el-form-item label="新别名" prop="newAlias">
              <el-input v-model="aliasForm.newAlias" placeholder="请输入新别名，需包含字母或数字"></el-input>
              <div style="color:#888;font-size:12px;margin-top:2px;">新别名需仅包含字母或数字</div>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="aliasForm.remark" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="aliasDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAliasChange">确 定</el-button>
          </span>
        </el-dialog>
      </div>
  </body>
</html>

<script>

const vm = new Vue({
    el: '#app', 
    data() {
        return {
          monitor_title:"OFA-800 4G汇聚网关",
          activeIndex:'monitor',
          date1:'',
          date2:'',
          userInfo:'',
          user:'',
          currentTime: new Date().toLocaleTimeString(),
          deviceData: [],
          loading: false,
          searchQuery: '',
          tableHeight: 500,
          sort: {
            prop: null,
            order: null
          },
          menuItems: [],
          selectedData: [],
          serialConfig: {
            serialport: '/dev/ttyAMA0',
            serialbaud: 115200,
            databits: 8,
            parity: 'none',
            stopbits: 1,
            enabled: true
          },
          baudRates: [1200, 2400, 4800, 9600, 19200, 38400, 57600, 115200],
          configLoading: false,
          activeTab: 'forward',
          collectorInfo: {},
          token: '',
          passwordDialogVisible: false,
          passwordForm: {
            oldPassword: '',
            newPassword: ''
          },
          passwordRules: {
            oldPassword: [
              { required: true, message: '请输入原密码', trigger: 'blur' }
            ],
            newPassword: [
              { required: true, message: '请输入新密码', trigger: 'blur' },
              { min: 6, message: '密码长度不能小于6位', trigger: 'blur' },
              { validator: function(rule, value, callback) {
                  if (!/(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]+/.test(value)) {
                    callback(new Error('新密码需包含字母和数字'));
                  } else {
                    callback();
                  }
                }, trigger: 'blur'
              }
            ]
          },
          aliasDialogVisible: false,
          aliasForm: {
            newAlias: '',
            remark: ''
          },
          aliasRules: {
            newAlias: [
              { required: true, message: '请输入新别名', trigger: 'blur' },
              { validator: function(rule, value, callback) {
                  if (!/^[A-Za-z\d]+$/.test(value)) {
                    callback(new Error('新别名需仅包含字母或数字'));
                  } else {
                    callback();
                  }
                }, trigger: 'blur'
              }
            ],
            remark: [
              { required: false, message: '请输入备注', trigger: 'blur' }
            ]
          }
      }
  },
  computed: {
    filteredDeviceData() {
      let data = this.deviceData;
      
      if (this.searchQuery) {
        data = data.filter(item => 
          item.deviceName.includes(this.searchQuery)
        );
      }
      
      if (this.sort.prop) {
        data = data.sort((a, b) => {
          if (this.sort.order === 'ascending') {
            return a[this.sort.prop] > b[this.sort.prop] ? 1 : -1;
          } else {
            return a[this.sort.prop] < b[this.sort.prop] ? 1 : -1;
          }
        });
      }
      
      return data;
    }
  },
  mounted() {
    console.log('monitor mounted')
    const token = localStorage.getItem("token");
    this.token = token
    const collectorInfo = localStorage.getItem("collectorInfo");
    this.collectorInfo = JSON.parse(collectorInfo)
    const menu = localStorage.getItem("menu");
     //当前host
     let url = window.location.host
     console.log(url)
     //测试环境
    //  url='192.168.0.230:1880'
     this.url = url
    console.log(menu)
    this.menuItems = JSON.parse(menu)
    // const mark = localStorage.getItem("mark");
    // this.monitor_title = mark
    let a=token.split('.')
    console.log(atob(a[1]))
    // this.userInfo=atob(a[1])
  
    let user=JSON.parse(atob(a[1])).username
    // console.log(user)   
    // console.log(mark)
   
    this.user=user
    
    setInterval(() => {
      this.currentTime = new Date().toLocaleTimeString();
    }, 1000);
    
    // 刷新数据
    this.refreshData()
    // 获取配置信息
    this.getSerialConfig();
  },
  //页面关闭
  beforeDestroy() {
    
  },
  methods: {
    refreshData(){
      console.log('refreshData')
      this.loading = true;
      let url=this.url
      axios.get(`http://${url}/sbcb/getRealtimeDevices`)
      .then(response => {
        console.log(response)
        if (response.data && response.data.code === 200 && response.data.data) {
          this.deviceData = response.data.data;
        } else {
          this.deviceData = [];
          this.$message.warning('返回数据格式不正确');
        }
      })
      .catch(error => {
        console.log(error)
        this.$message.error('数据加载失败');
      })
      .finally(() => {
        this.loading = false;
      })
    },

    //页面跳转处理
    handleSelect(key, keyPath){
      console.log(key);
      console.log(keyPath);
        // 如果路径存在，跳转到对应路径
        let currentPath = window.location.href;
        let currentPathArray = currentPath.split('/');
        currentPathArray[currentPathArray.length - 1] = key;
        let newPath = currentPathArray.join('/');
        if (newPath.includes('localhost')) {
          newPath = newPath + '.html';
        }
        // window.location.href = newPath;
       // 检查路径是否存在
       navigateToPage(newPath)

      function navigateToPage(url) {
        console.log('navigateToPage')
        console.log(url)  
        fetch(url)
        .then(response => {
            if (response.ok) {
                console.log('response.ok')
                // 如果页面可访问，跳转到目标页面
                window.location.href = url;
            } else {
              console.log('response.not ok')
              let currentPathArray = url.split('/');
              currentPathArray[currentPathArray.length-1] = '404';
              let newPath = currentPathArray.join('/');
              // window.location.href = newPath;
              // console.log(newPath)
              // 如果页面不可访问，跳转到404页面
              if(url.includes('localhost')){
                //url最后添加.html
                newPath = newPath + '.html';
              }
              console.log(newPath)
              window.location.href = newPath;
            }
        })
        .catch(error => {
            console.log('error')
            // 如果请求失败（例如网络问题），也跳转到404页面
            console.error("Error fetching the page:", error);
              // 如果页面不可访问，跳转到404页面

        });
}
    },


    //登出
    logout(){
    this.$confirm('确认登出?', '登出', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          callback: action => {
            this.$message({
              type: 'info',
              message: `Logout: ${ action }`,
              customClass: 'winClass',
              center: true
            });
            if(action =='confirm'){
                localStorage.clear();
                //清除页面数据
                this.meterStatus = [];
                this.combinedMeterData = [];
                this.configSet = [];
                this.gatewayCount = 0;
                this.meterCount = 0;
                this.faultyMeterCount = 0;
                this.unregisteredMeterCount = 0;
                localStorage.clear();
                //跳转到登录页面,url最后一级别替换为login，如果是本地文件路径在后面添加.html
                // let currentPath = window.location.href;
                // let currentPathArray = currentPath.split('/');
                // currentPathArray[currentPathArray.length-1] = 'login';
                // let newPath = currentPathArray.join('/');
                // if(newPath.includes('file://')){
                //   newPath = newPath + '.html';
                // }
                this.handleSelect('login',['login'])
                // setTimeout(this.handleSelect('login',['login']),1000);
            }
          }
        });
  },
  handleSortChange({ prop, order }) {
    this.sort.prop = prop;
    this.sort.order = order;
  },
  // 添加转发数据
  handleAddForward(row) {
    // 检查是否已经存在
    const exists = this.selectedData.some(item => item.deviceCode === row.deviceCode);
    if (!exists) {
      // 将浮点数转换为十六进制
      const totalData = parseFloat(row.deviceTotalData) || 0;
      const buffer = new ArrayBuffer(4);
      const view = new DataView(buffer);
      view.setFloat32(0, totalData);
      
      // 将字节转换为十六进制字符串
      let hexValue = '';
      for (let i = 0; i < 4; i++) {
        const byte = view.getUint8(i).toString(16).padStart(2, '0');
        hexValue += byte;
      }
      
      this.selectedData.push({
        deviceCode: row.deviceCode,
        deviceUserName: row.deviceName || '未命名设备',
        deviceTotalData: row.deviceTotalData || '0',
        hexValue: hexValue.toUpperCase()
      });
      this.$message.success('添加转发成功');
    } else {
      this.$message.warning('该设备已在转发列表中');
    }
  },

  // 删除转发数据
  handleDeleteForward(index) {
    this.selectedData.splice(index, 1);
    this.$message.success('删除转发成功');
  },
  exportSelectedData() {
    // 生成导出数据
    const exportData = this.selectedData.map((item, idx) => ({
      设备编号: item.deviceCode,
      设备名称: item.deviceUserName,
      总用量: item.deviceTotalData,
      十六进制值: item.hexValue,
      寄存器地址: idx * 2
    }));
    /* xlsx导出 */
    const ws = XLSX.utils.json_to_sheet(exportData);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, '转发数据');
    XLSX.writeFile(wb, '转发数据.xlsx');
  },
  saveSerialConfig() {
    // 准备要上传的数据
    const configData = {
      serialConfig: this.serialConfig,
      forwardDevices: this.selectedData
    };
    console.log(configData)
    let url = this.url;
    this.loading = true;
    //测试环境
    axios.post(`http://${url}/api/uploadConfig`, configData)
      .then(response => {
        if (response.data && response.data.code === 200) {
          this.$message.success('配置保存成功');
        } else {
          this.$message.warning(response.data.msg || '保存失败，请重试');
        }
      })
      .catch(error => {
        console.error('保存配置出错:', error);
        this.$message.error('保存配置失败，请检查网络连接');
      })
      .finally(() => {
        this.loading = false;
      });
  },
  // 获取配置信息
  getSerialConfig() {
    this.configLoading = true;
    let url = this.url;
    
    axios.get(`http://${url}/api/getConfig`)
      .then(response => {
        if (response.data && response.data.code === 200) {
          const config = response.data.data;
          
          // 更新串口配置
          if (config.serialConfig) {
            this.serialConfig = config.serialConfig;
          }
          
          // 更新转发设备列表
          if (config.forwardDevices && Array.isArray(config.forwardDevices)) {
            this.selectedData = config.forwardDevices;
          }
          
          this.$message.success('配置加载成功');
        } else {
          this.$message.warning(response.data.msg || '获取配置失败');
          
          // 尝试从本地存储加载
          const localSerialConfig = localStorage.getItem('serialConfig');
          const localForwardDevices = localStorage.getItem('forwardDevices');
          
          if (localSerialConfig) {
            try {
              this.serialConfig = JSON.parse(localSerialConfig);
              this.$message.info('已从本地加载串口配置');
            } catch (e) {
              console.error('解析本地串口配置失败', e);
            }
          }
          
          if (localForwardDevices) {
            try {
              this.selectedData = JSON.parse(localForwardDevices);
              this.$message.info('已从本地加载转发设备列表');
            } catch (e) {
              console.error('解析本地转发设备列表失败', e);
            }
          }
        }
      })
      .catch(error => {
        console.error('获取配置出错:', error);
        this.$message.error('获取配置失败，请检查网络连接');
        
        // 尝试从本地存储加载
        const localSerialConfig = localStorage.getItem('serialConfig');
        const localForwardDevices = localStorage.getItem('forwardDevices');
        
        if (localSerialConfig) {
          try {
            this.serialConfig = JSON.parse(localSerialConfig);
            this.$message.info('已从本地加载串口配置');
          } catch (e) {
            console.error('解析本地串口配置失败', e);
          }
        }
        
        if (localForwardDevices) {
          try {
            this.selectedData = JSON.parse(localForwardDevices);
            this.$message.info('已从本地加载转发设备列表');
          } catch (e) {
            console.error('解析本地转发设备列表失败', e);
          }
        }
      })
      .finally(() => {
        this.configLoading = false;
      });
  },
  handleCommand(command) {
    if (command === 'changePassword') {
      this.passwordDialogVisible = true;
    } else if (command === 'changeAlias') {
      this.aliasDialogVisible = true;
    }
  },
  submitPasswordChange() {
    this.$refs.passwordForm.validate((valid) => {
      if (valid) {
        let url = this.url;
        axios.post(
          `http://${url}/api/updatePsw`,
          {
            username: this.user,
            oldpsw: md5(this.passwordForm.oldPassword),
            newpsw: md5(this.passwordForm.newPassword),
            token: this.token
          }
        )
        .then(response => {
          console.log(response)
          if (response.data && response.data.code === 200) {
            this.$message.success('密码修改成功');
            this.passwordDialogVisible = false;
            this.passwordForm.oldPassword = '';
            this.passwordForm.newPassword = '';
          } else {
            this.$message.error(response.data.msg || '密码修改失败');
          }
        })
        .catch(error => {
          console.error('修改密码出错:', error);
          this.$message.error('修改密码失败，请检查网络连接');
        });
      }
    });
  },
  submitAliasChange() {
    this.$refs.aliasForm.validate((valid) => {
      if (valid) {
        let url = this.url;
        axios.post(
          `http://${url}/api/updateHostname`,
          {
            mac: this.collectorInfo.mac,
            hostname: this.aliasForm.newAlias,
            name: this.aliasForm.remark
          }
        )
        .then(response => {
          console.log(response)
          if (response.data && response.data.code === 200) {
            this.$message.success('别名修改成功');
            this.aliasDialogVisible = false;
            this.aliasForm.newAlias = '';
            this.aliasForm.remark = '';
          } else {
            this.$message.error(response.data.msg || '别名修改失败');
          }
        })
        .catch(error => {
          console.error('修改别名出错:', error);
          this.$message.error('修改别名失败，请检查网络连接');
        });
      }
    });
  }
}   
})
</script>
<style>
    .tagValue{
        text-align: center;
        font-size:30px;
        color: #92a8d1;
    }
    .box-card{
        width: 100%;
        margin-bottom: 5px;
 
    }
    /* .winClass{
        width: 80%;
    } */
    /* @media screen and (max-width: 750px) {
    .winClass {
    width: 60% !important;
  } */
    .el-message-box__btns { 
    padding: 5px 15px 0; text-align: center; 
    }    
    .el-message-box { 
    width: 60%; 
    }
    .max{
       width:30px;
       height:30px 
    }
    /* 增加菜单项的内边距 */
    .el-menu-item {
       text-align: center;
       cursor: pointer;
       padding: 0;
    }

    /* 调整下拉箭头的位置 */
    .el-submenu__title {
        align-items: center; /* 垂直居中对齐 */
        padding: 0;
    }
    .time{
      color: #ffffff;
      font-size: 16px;
      margin-top: 10px;
    }
    .el-card {
      background-color: #1a2a3a;
      color: #ffffff;
    }
    .el-list-item {
      background-color: #2a3a4a;
      margin: 5px 0;
      padding: 10px;
      border-radius: 5px;
    }
    .el-table {
      background-color: #0e1e2f;
      overflow-y: auto;
    }
    .el-table__body-wrapper {
      overflow-y: auto;
    }
    .el-table__fixed-header-wrapper {
      background-color: #1a2a3a;
    }
    .el-table__fixed-body-wrapper {
      background-color: #0e1e2f;
    }
    .el-table th {
      background-color: #1a2a3a !important;
      color: #e6e6e6;
    }
    .el-table tr {
      background-color: #0e1e2f;
      color: #e6e6e6;
    }
    .el-table--striped .el-table__body tr.el-table__row--striped td {
      background-color: #1a2a3a;
    }
    .el-table--border::after, .el-table--group::after, .el-table::before {
      background-color: #2a3a4a;
    }
    .el-table--border {
      border-color: #2a3a4a;
    }
    .el-table td, .el-table th.is-leaf {
      border-bottom-color: #2a3a4a;
    }
    .el-table--border th, .el-table--border td {
      border-right-color: #2a3a4a;
    }
    /* 响应式布局样式 */
    @media screen and (max-width: 768px) {
      .el-header {
        padding: 0;
      }
      .el-menu-item {
        padding: 0 10px;
      }
      .el-table {
        font-size: 12px;
      }
      .el-button--mini {
        padding: 5px 8px;
        font-size: 11px;
      }
      .el-form-item {
        margin-bottom: 10px;
      }
      .el-card__header {
        padding: 10px;
      }
      .el-card__body {
        padding: 10px;
      }
    }
    /* 设备配置样式 */
    .el-tabs__item {
      color: #a0a0a0 !important;
      font-size: 14px;
    }
    
    .el-tabs__item.is-active {
      color: #409EFF !important;
      font-weight: bold;
    }
    
    .el-tabs__nav-wrap::after {
      background-color: #2a3a4a !important;
    }
    
    .el-form-item__label {
      color: #e6e6e6 !important;
      font-weight: bold;
    }
    
    .el-input__inner, .el-input-number__decrease, .el-input-number__increase {
      background-color: #2a3a4a !important;
      border-color: #3a4a5a !important;
      color: #e6e6e6 !important;
    }
    
    .el-select-dropdown {
      background-color: #2a3a4a !important;
      border-color: #3a4a5a !important;
    }
    
    .el-select-dropdown__item {
      color: #e6e6e6 !important;
    }
    
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
      background-color: #3a4a5a !important;
    }
    
    .el-tabs--border-card {
      background: #1a2a3a !important;
      border: 1px solid #2a3a4a !important;
    }
    
    .el-tabs--border-card > .el-tabs__header {
      background-color: #0e1e2f !important;
      border-bottom: 1px solid #2a3a4a !important;
    }
    
    .el-switch__label {
      color: #e6e6e6 !important;
    }
    
    .el-switch__label.is-active {
      color: #e6e6e6 !important;
    }

    /* 自定义 el-dialog 深色风格 */
    .el-dialog {
      background: #1a2a3a !important;
      color: #e6e6e6 !important;
    }
    .el-dialog__title {
      color: #e6e6e6 !important;
    }
    .el-dialog__header {
      border-bottom: 1px solid #2a3a4a;
    }
    .el-dialog__body {
      background: #1a2a3a !important;
    }
    .el-form-item__label {
      color: #e6e6e6 !important;
    }
    .el-input__inner {
      background: #2a3a4a !important;
      color: #e6e6e6 !important;
      border-color: #3a4a5a !important;
    }
    .el-form-item.is-error .el-input__inner {
      background: #2a3a4a !important;
      color: #ff4949 !important;
      border-color: #ff4949 !important;
    }
    .el-dialog__footer {
      background: #1a2a3a !important;
      border-top: 1px solid #2a3a4a;
    }
    .el-button--primary {
      background-color: #409EFF !important;
      border-color: #409EFF !important;
    }
    .el-button {
      color: #e6e6e6 !important;
    }
    .small-button {
      padding: 5px 10px;
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      margin-bottom: 5px;
    }
    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
</style>